<template>
  <div class="after_sales_page">
    <div class="after_sales_info">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item :label="`${dialogData.btnName}说明`" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入说明内容"
          />
        </el-form-item>
        <el-form-item>
          <div class="btn_group">
            <el-button @click="close">取消</el-button>
            <el-button
              type="primary"
              @click="submit"
            >
              {{ dialogData.btnName }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  dialog: {
    btnName?: string
    afterId?: string
    remark?: string
    visible?: boolean
  }
}>()

const emits = defineEmits<{
  (e: 'close'): void
  (e: 'dialogs', data: any): void
}>()

const { dialog } = toRefs(props)
const dialogData = ref<{
  btnName?: string
  afterId?: string
  remark?: string
  visible?: boolean
}>({})
const formRef = ref<any>(null)
const form = ref<{
  remark: string
}>({
  remark: ''
})

const rules = {
  remark: [
    { required: true, message: '请输入说明内容', trigger: 'blur' }
  ]
}

// 初始化数据
dialogData.value = dialog.value || {}

function close() {
  emits('close')
}

function submit() {
  if (!formRef.value) return
  
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      // 触发父组件的dialogs事件
      emits('dialogs', {
        ...dialogData.value,
        remark: form.value.remark
      })
    } else {
      ElMessage.error('请填写必填项')
    }
  })
}
</script>

<style lang="scss" scoped>
.after_sales_page {
  .after_sales_info {
    .btn_group {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>